<template>
  <div class="map-container clearfix">
    <p class="title">
      <span>省区设备分布</span>
    </p>
    <div class="left">
      <div v-for="(item, index) in leftData" :key="index">
        <span class="text">{{ item.text }}</span>
        <span :style="{ color: item.color }" class="num">{{ item.value }}</span>
      </div>
    </div>
    <div class="right">
      <div class="map-div" ref="myEchart"></div>
      <div class="legend-div">
        <div class="type-div">
          <p>
            <img src="../../assets/platform/control-icon.png" alt="" />
            <span>控制设备</span>
          </p>
          <p class="ml-30">
            <img src="../../assets/platform/transmission-icon.png" alt="" />
            <span>传输工具</span>
          </p>
        </div>
        <div class="status-div">
          <p
            v-for="(item, index) in statusData"
            :key="index"
            :class="index > 0 ? 'ml-20' : ''"
          >
            <i :style="{ background: item.color }"></i>
            <span>{{ item.text }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import '../../../node_modules/echarts/map/js/china'

import area from '../../data/area.json'

import { top, provinceDeviceCount } from '@/api/homePage'

export default {
  name: 'provincialMap',
  data() {
    return {
      leftData: [
        {
          text: '设备总数',
          value: 0,
          color: '#FFD62D'
        },
        {
          text: '在线率',
          value: '0%',
          color: '#70E2D4'
        },
        {
          text: '告警数',
          value: 0,
          color: '#FC7070'
        },
        {
          text: '用户数量',
          value: 0,
          color: '#6CCAFF'
        }
      ],
      myEchart: null,
      statusData: [
        {
          text: '在线',
          color: '#00FFC1'
        },
        {
          text: '离线',
          color: '#3CB9FF'
        },
        {
          text: '休眠',
          color: '#005FCF'
        }
      ],
      areaData: []
    }
  },
  async mounted() {
    this.initChart()
    this.getCount()
  },
  methods: {
    initChart() {
      this.myEchart = echarts.init(this.$refs.myEchart)
      const option = {
        tooltip: {
          show: false
        },
        geo: {
          map: 'china',
          roam: false, // 一定要关闭拖拽
          zoom: 1.23,
          center: [105, 36], // 调整地图位置
          label: {
            normal: {
              show: true,
              fontSize: '12',
              color: '#fff',
              position: ['50%', '50%']
            },
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#0d0059',
              borderColor: '#389dff',
              borderWidth: 1, // 设置外层边框
              shadowBlur: 5,
              shadowOffsetY: 8,
              shadowOffsetX: 0,
              shadowColor: '#7AD2FF'
            },
            emphasis: {
              areaColor: '#184cff',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 5,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        series: [
          {
            type: 'map',
            map: 'china',
            roam: false,
            zoom: 1.23,
            center: [105, 36],
            // geoIndex: 1,
            // aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#002B5F',
                borderColor: '#00EFFF',
                borderWidth: 0.5,
                borderType: 'dashed'
              },
              emphasis: {
                areaColor: '#0C4F9E',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 5,
                borderWidth: 2,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                borderType: 'dashed'
              }
            }
          }
        ]
      }
      this.myEchart.setOption(option)
      this.add()
    },

    async add() {
      const dataValue = await this.getProvinceCount()
      let countData = []
      dataValue.forEach(item => {
        countData.push(item.deviceCount)
      })
      let maxCount = Math.max(...countData)
      const imgurl = require('../../assets/platform/map-icon.png')
      function addImage(params, api, realData) {
        return {
          type: 'image',
          style: {
            image: imgurl,
            x:
              api.coord([
                realData[params.dataIndex].value[0],
                realData[params.dataIndex].value[1]
              ])[0] - 15,
            y:
              api.coord([
                realData[params.dataIndex].value[0],
                realData[params.dataIndex].value[1]
              ])[1] -
              (60 / maxCount) * realData[params.dataIndex].deviceCount,
            width: 29,
            height: (60 / maxCount) * realData[params.dataIndex].deviceCount
          }
        }
      }
      var option = {
        series: [
          {
            type: 'map',
            map: 'china',
            roam: false,
            zoom: 1.23,
            center: [105, 36],
            // geoIndex: 1,
            // aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true,
                fontSize: '12',
                color: '#fff',
                position: ['50%', '50%']
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#002B5F',
                borderColor: '#00EFFF',
                borderWidth: 0.5,
                borderType: 'dashed'
              },
              emphasis: {
                areaColor: '#0C4F9E',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 5,
                borderWidth: 2,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                borderType: 'dashed'
              }
            }
          },
          {
            name: '',
            type: 'custom',
            coordinateSystem: 'geo',
            data: dataValue,
            z: 20,
            renderItem: function(params, api) {
              return addImage(params, api, dataValue)
            }
          }
        ]
      }
      this.myEchart.setOption(option)
    },

    async getCount() {
      const {
        data: { data }
      } = await top()

      this.leftData[0].value = data.deviceTotal
      this.leftData[1].value = `${data.deviceOnlineFate}%`
      this.leftData[2].value = data.policeTotal
      this.leftData[3].value = data.userTotal
    },

    async getProvinceCount() {
      const {
        data: { data }
      } = await provinceDeviceCount()

      return data.map(item => {
        const a = area.find(a => a.n == item.name)

        return {
          ...item,
          value: a.g.split(',')
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.ml-30 {
  margin-left: 30px;
}
.ml-20 {
  margin-left: 20px;
}
.map-container {
  position: absolute;
  width: 1133px;
  height: 685px;
  top: 100px;
  left: 391px;
  .title {
    width: 100%;
    height: 50px;
    background: url(../../assets/platform/map-title.png) no-repeat;
    span {
      color: #fff;
      font-size: 20px;
      width: 420px;
      text-align: center;
      display: inline-block;
      line-height: 50px;
    }
  }
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: ' ';
  clear: both;
  height: 0;
}
.left {
  float: left;
  width: 160px;
  padding-top: 20px;
  > div {
    width: 160px;
    height: 89px;
    background: url(../../assets/platform/map-item-bg.png) no-repeat;
    text-align: center;
    margin-bottom: 50px;
    padding-top: 20px;
  }
  .text {
    color: #fff;
    font-size: 14px;
    display: block;
  }
  .num {
    display: block;
    font-size: 40px;
    font-family: Teko-Regular, Teko;
  }
}
.right {
  float: left;
  width: 800px;
  height: 620px;
  padding-left: 30px;
  position: relative;
  .map-div {
    height: 100%;
  }
  .legend-div {
    position: absolute;
    top: 10px;
    color: #fff;
    font-size: 12px;
    left: 50%;
    transform: translateX(-50%);
    p {
      display: inline-flex;
      align-items: center;
    }
    .type-div {
      img {
        width: 32px;
        height: 32px;
        margin-right: 10px;
      }
    }
    .status-div {
      text-align: center;
      i {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 2px;
        margin-right: 10px;
      }
    }
  }
}
</style>
